<template>
	<view>
		<uni-popup ref="popup" @change="onPopupChange" type="center" :isMaskClick="isMaskClick">
			<view class='box'>
				<view class='boxHead'>
					<text class="caption" v-if="title">{{title}}</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="onCancel()"></uni-icons>
					</view>
				</view>
				<view class='boxBody  margin-top-15' v-if="contactData.servicer">
					<view class="center">
						<view class="flex-column">
							<view class="center">
								<image class="avatar-img avatar-60" :src="contactData.servicer.avatar||'../../static/images/icon_servicer.png'"></image>
							</view>
							<view class="center margin-top">
								<text class="font-22">{{contactData.servicer.name}}</text>
							</view>
						</view>
						
					</view>
					<view class='row-box margin-top-15' v-if="contactData.contact_list">
						<view class='row-cell' v-for="(item,index) in contactData.contact_list" :key="index" @click="go.page(item)">
							<view class="flex-text">
								<uni-icons :type="item.group" size="20"></uni-icons>
								<text>{{item.title}}</text>
							</view>
							<view >
								<text class="tip-text">{{item.content}}</text>
								<uni-icons type="arrowright" size="20" color='#ccc'></uni-icons>
							</view>
							
						</view>
					</view>
				</view>
				<slot></slot>
			</view>
		
		</uni-popup>
	</view>
</template>

<script>
	import request from '../../libs/request.js';
	export default {
		name: 'PocketPopupContact',
		props: {
			title: {
				type: String,
				default: '您的专属客服'
			},
			contact: {
				type: Object,
				default () {
					return {}
				}
			},
			bottom: {
				type: String,
				default: '0px'
			},
			/* 单选还是多选 */
			isMaskClick: {
				type: Boolean,
				default () {
					return true
				}
			},
			border: {
				type: [Boolean,String],
				default: ''
			},
		},
		watch:{
			contact: {
				handler(newVal) {
					this.contactData = newVal;
				},
				immediate: true
			},
			
			
		},
		data() {
			return {
				contactData:{}
			}
		},
		mounted() {
			// 渲染

		},
		methods: {
			onPopupChange(e) {
				// 捕捉uniPopup点击遮罩层关闭事件
				if (!e.show) {
					if (this.isMaskClose) {
						this.$emit('cancel');
					}
					this.isMaskClose = true
				}
				this.$emit("popup_change", e);
			},
			onCancel() {
				this.$emit('cancel');
				this.close();
			},

		
			open(url='') {
				request.post(url || '/artisan_v2/help/contact').cache(7200).then(res=>{
					if (res){
						this.contactData = res;
					}
				});
				
				this.$refs.popup.open();
				this.$emit('open');
			},
			
			/**
			 * 关闭窗口
			 */
			close() {
				this.$refs.popup.close();
				this.$emit('close');
			},
		
		}
	}
</script>

